<template>
  <Dialog :title="openRow.name + '-图库上传'" v-model="dialogVisible">
    <div class="wrapper">
      <el-form-item label="图库来源:" prop="from">
        <el-radio-group v-model="formData.from" @change="(val) => toValue1(val)">
          <el-radio v-for="(item, index) in source" :value="item.value" :key="index" :label="item.label" />
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item label="数据集类型:" prop="type">
        <el-radio-group v-model="formData.type" @change="(val) => toValue1(val)">
          <el-radio v-for="(item, index) in type_" :value="item.value" :key="index" :label="item.label" />
        </el-radio-group>
      </el-form-item> -->
      <el-form-item class="!mb-1" label="图库上传:" prop="">
        <div class="btn-group">
          <el-button class="" v-if="formData.from != 2" type="primary" @click="upload">图库上传</el-button>
        </div>
        <div class="file-box flex-1" v-if="formData.from != 2">
          <!-- todo 已上传的文件列表 -->
          <div v-if="fileList.length > 0" class="fileList">
            <div class="title">已上传列表</div>
            <ul class="file-list overflow-y-auto h-[189px]">
              <li v-for="file in fileList" :key="file.id" class="file-item">
                <uploader-file ref="files" :file="file" :list="true" />
              </li>
            </ul>
          </div>
          <div v-else class="empty">
            <el-empty>
              <template #description>
                <p>暂无文件，请先<a class="upload" @click="upload">上传</a></p>
              </template>
            </el-empty>
          </div>
        </div>

        <el-button link type="primary" v-if="formData.from == 2" @click="selectPicLib">
          {{
            utilsFn.isEmptyObj(clickedCellData) ? '点击选择' : `已选择图库-${clickedCellData.name}`
          }}
        </el-button>
      </el-form-item>

      <!-- <el-form-item v-if="formData.from != 2" label="标签上传:" prop="suggestedMinPrice">
        <div class="btn-group">
          <el-button class="mb-12" type="primary" @click="uploadTag">标签上传</el-button>
        </div>
      </el-form-item> -->
      <el-form-item v-if="formData.from == 2" label="克隆方式:" prop="suggestedMinPrice">
        <el-radio-group v-model="formData.cloneType" @change="(val) => toValue1(val)">
          <el-radio v-for="(item, index) in cloneSource" :value="item.value" :key="index" :label="item.label" />
        </el-radio-group>
      </el-form-item>
      <picSelectForm width="55%" ref="picSelectFormRef" :dbClickData="getDbClickData" />
    </div>
    <template #footer>
      <!-- <el-button type="primary" @click="bindGallery">确 定 </el-button> -->
      <el-button @click="closeModal">关 闭</el-button>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>
// import { bindGallery } from '@/api/gallery-upload/index'
import picSelectForm from './picSelectForm.vue'
import Bus from '@/components/uploadCom/utils/bus'
import utilsFn from '@/utils/tools'
const picSelectFormRef = ref()
const fileList = ref([] as any)
const openRow = ref({})

const formData = reactive({
  from: '1',
  cloneType: '1',
  type: '1',

})
const source = ref([
  {
    value: '1',
    label: '新建图库'
  },
  // {
  //   value: '2',
  //   label: '克隆图库'
  // }
])
const type_ = ref([
  {
    value: '1',
    label: '训练集'
  },
  {
    value: '2',
    label: '训练集'
  }
])
const cloneSource = ref([
  {
    value: '1',
    label: '仅克隆图像'
  },
  {
    value: '2',
    label: '克隆图像和标签'
  }
])
let clickedCellData: any = ref({})
let dialogVisible = ref(false)

const closeModal = () => {
  fileList.value = []
  dialogVisible.value = false
}

// const bindGallery = async () => {
//   const params = {
//     galleryId: openRow.value.id,
//     fileId: formData.cloneType,
//     type: formData.type,
//     // markId: '',
//     // labels: {}
//   }
// }

const uploadTag = () => { }
const open = (row) => {
  dialogVisible.value = true
  openRow.value = row
}

defineExpose({ open })

const toValue1 = () => { }
const getDbClickData = (e) => {
  clickedCellData.value = e
}
const selectPicLib = () => {
  picSelectFormRef.value.open()
}

const upload = () => {
  // console.log(import.meta.env)
  // 打开文件选择框
  Bus.emit('openUploader', {
    // 给服务端的额外参数
    params: {
      galleryId: openRow.value.id,
    },
    options: {
      // 3000端口 http://localhost:3000/upload
      target: `${import.meta.env.VITE_BASE_URL}/admin-api/gallery/file/upload`,
      query: { upload_token: 'my_token' }
    }
  })
}

onMounted(() => {
  // 文件选择后的回调
  Bus.on('fileAdded', () => {
    console.log('文件已选择')
  })

  // 文件上传成功的回调
  Bus.on('fileSuccess', ({ file }) => {
    // console.log(file)
    fileList.value.push(file)
    console.log('文件上传成功')
    console.log(fileList.value)
  })
})

onBeforeUnmount(() => {
  Bus.off('fileAdded')
  Bus.off('fileSuccess')
})
</script>

<style scoped lang="scss"></style>
